<template>
  <yd-tabbar active-class="tab-active">
    <yd-tabbar-item title="首页" link="/">
      <yd-icon name="home" slot="icon" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
    <yd-tabbar-item title="分类" link="/category">
      <i slot="icon" class="custom-icon"></i>
    </yd-tabbar-item>
    <yd-tabbar-item title="购物车" link="/cart">
      <yd-icon name="shopcart-outline" slot="icon" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
    <yd-tabbar-item title="我的" link="/user">
      <yd-icon name="ucenter-outline" slot="icon" size="0.54rem"></yd-icon>
    </yd-tabbar-item>
  </yd-tabbar>
</template>

<style lang="less" scoped>
.tab-active {
  color: #da4644 !important;
  .custom-icon {
    background-image: url('../assets/icon/icon-category1.png');
  }
}
.custom-icon {
  width: 0.48rem;
  height: 0.5rem;
  background: url('../assets/icon/icon-category.png') no-repeat;
  background-size: contain;
}
</style>

